<template>
  <div class="container">
    <el-card v-if="isShow">
      <!-- 搜索区域 -->
      <el-form size="normal">
        <!-- 新增试题 -->
        <el-row :gutter="20">
          <el-col :span="6" :offset="18">
            <el-form-item>
              <el-button
                size="mini"
                type="primary"
                plain
                class="addTestBtn"
                style="margin-right:20px"
                @click="addTestBtn"
              >新增试题</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 搜索一 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学科名称">
              <el-select
                v-model="queryData.subject_id"
                size="mini"
                placeholder="请选择学科名称"
                @change="changeSubject"
              >
                <el-option v-for="item in SubjectNameList" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目录名称">
              <el-select v-model="queryData.directory_id" size="mini" placeholder="请选择目录名称" @change="changeDirectory">
                <el-option v-for="item in directoryNameList" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签名称">
              <el-select v-model="queryData.tag_id" size="mini" placeholder="请选择标签名称">
                <el-option v-for="item in tagNameList" :key="item.id" :value="item.id" :label="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型名称">
              <el-select v-model="queryData.quest_type" size="mini" placeholder="请选择试题类型">
                <el-option :value="1" label="单选题" />
                <el-option :value="2" label="多选题" />
                <el-option :value="3" label="判断题" />
                <el-option :value="4" label="简答题" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 搜索二 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="审核状态">
              <el-select v-model="queryData.check_state" size="mini" placeholder="请选择审核状态">
                <el-option :value="1" label="待审核" />
                <el-option :value="2" label="审核通过" />
                <el-option :value="3" label="不通过" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发布状态">
              <el-select v-model="queryData.show_state" size="mini" placeholder="请选择发布状态">
                <el-option :value="1" label="上架" />
                <el-option :value="2" label="下架" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建者" label-width="60px">
              <el-input v-model="queryData.create_name" size="mini" style="width:180px" placeholder="请选择创建者" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题难度">
              <el-select v-model="queryData.difficulty" size="mini" placeholder="请选择试题难度">
                <el-option :value="1" label="简单" />
                <el-option :value="2" label="中等" />
                <el-option :value="3" label="较难" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 搜索三 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="是否真题">
              <el-select v-model="queryData.is_true_question" size="mini" placeholder="是否真题">
                <el-option :value="1" label="是" />
                <el-option :value="2" label="否" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间" label-width="80px">
              <el-date-picker
                v-model="queryData.createTime"
                value-format="timestamp"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @blur="tiemToString"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item>
              <el-button type="primary" size="small" @click="getTestList">查询</el-button>
              <el-button size="small" @click="resetTest">重置</el-button>
              <!-- 切换简单和复杂模式 -->
              <el-button
                type="warning"
                icon="el-icon-folder-add"
                size="small"
                plain
                @click="isChangeState =!isChangeState"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 批量操作按钮 -->
      <el-row v-if="multipleSelection.length">
        <el-col>
          <el-button type="success" @click="upTestMore">批量上架</el-button>
          <el-button type="warning" @click="downTestMore">批量下架</el-button>
          <el-button type="success" @click="auditTestMore">批量通过</el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table :fit="false" :data="tableData" border stripe empty-text="您搜索的内容为空" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="试题信息"
          width="1380"
        >
          <template slot-scope="{row}">
            <!--  描述列表1 -->
            <el-descriptions>
              <el-descriptions-item>
                <template name="label">
                  <div style="margin-right:20px;">ID:<span>{{ row.id }}</span></div>
                  题干信息:
                  <el-link
                    type="primary"
                    style="line-height:0;padding:0;margin:0;"
                    @click="openTestBank(row)"
                    v-html="row.question"
                  />
                </template>
              </el-descriptions-item>
            </el-descriptions>
            <!-- 复杂 描述列表 -->
            <el-descriptions v-if="isChangeState" :column="4" size="medium ">
              <el-descriptions-item label="试题编号">{{ row.quest_num }}</el-descriptions-item>
              <el-descriptions-item label="试题类型">
                <span v-if="row.quest_type===1">单选题</span>
                <span v-if="row.quest_type===2">多选题</span>
                <span v-if="row.quest_type===3">判断题</span>
                <span v-if="row.quest_type===4">简答题</span>
              </el-descriptions-item>
              <el-descriptions-item label="归属学科">{{ row.subject_name }}</el-descriptions-item>
              <el-descriptions-item label="归属目录">{{ row.directory_name }}</el-descriptions-item>
              <!-- 判断 标签信息-->
              <el-descriptions-item v-if="row.tag_info.length" label="标签信息">{{ row.tag_info.join(',') }}</el-descriptions-item>
              <el-descriptions-item v-else label="标签信息">暂无</el-descriptions-item>
              <el-descriptions-item label="发布状态">
                <el-tag v-if="row.show_state===1" type="success">上架</el-tag>
                <el-tag v-if="row.show_state===2" type="info">下架</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="审核人">暂无</el-descriptions-item>
              <el-descriptions-item label="审核状态">
                <el-tag v-if="row.check_state===1">待审核</el-tag>
                <el-tag v-if="row.check_state===2" type="success">通过</el-tag>
                <el-tag v-if="row.check_state===3" type="danger">不通过</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="审核意见">{{ row.check_remarks||'暂无' }}</el-descriptions-item>
              <el-descriptions-item label="创建人">{{ row.create_name }}</el-descriptions-item>
              <el-descriptions-item label="难度系数">
                <span v-if="row.difficulty===1">简单</span>
                <span v-if="row.difficulty===2">中等</span>
                <span v-if="row.difficulty===3">较难</span>
              </el-descriptions-item>
              <el-descriptions-item label="发布时间">{{ dataFormat(row.created_at) }}</el-descriptions-item>
            </el-descriptions>
            <!-- 简单 描述列表 -->
            <el-descriptions v-else :column="5" size="medium ">
              <el-descriptions-item label="归属学科">{{ row.subject_name }}</el-descriptions-item>
              <el-descriptions-item label="归属目录">{{ row.directory_name }}</el-descriptions-item>
              <!-- 判断 标签信息-->
              <el-descriptions-item v-if="row.tag_info.length" label="标签信息">{{ row.tag_info.join(',') }}</el-descriptions-item>
              <el-descriptions-item v-else label="标签信息">暂无</el-descriptions-item>
              <el-descriptions-item label="发布状态">
                <el-tag v-if="row.show_state===1" type="success">上架</el-tag>
                <el-tag v-if="row.show_state===2" type="info">下架</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="发布时间">{{ dataFormat(row.created_at) }}</el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="160"
        >
          <template slot-scope="{row}">
            <!-- 上架 下架 互斥 -->
            <el-link
              v-if="row.show_state===2"
              :underline="false"
              type="primary"
              icon="el-icon-edit"
              style="margin-right:20px"
              @click.native="upTest(row.id)"
            >上架</el-link>
            <el-link
              v-if="row.show_state===1"
              :underline="false"
              type="primary"
              icon="el-icon-edit"
              style="margin-left:30px"
              @click.native="downTest(row.id)"
            >下架</el-link>
            <!-- 上架时显示修改 -->
            <el-link
              v-if="row.show_state===2"
              :underline="false"
              type="primary"
              icon="el-icon-edit"
              style="margin-right:20px"
              @click.native="showAddTest(row.id)"
            >修改</el-link>
            <!-- check_state===1审核  -->
            <el-link
              v-if="row.check_state===1"
              :underline="false"
              type="primary"
              icon="el-icon-edit"
              @click.native="auditTest(row.id)"
            >审核</el-link>
            <!-- 上架显示删除 -->
            <el-link
              v-if="row.show_state===2"
              :underline="false"
              type="primary"
              icon="el-icon-delete"
              style="margin-left:20px"
              @click.native="deleteTest(row.id)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        :current-page.sync="queryData.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </el-card>
    <!-- 新增组件 -->
    <addTestBank v-if="!isShow" ref="addQuestiontBank" :question-test-detail="questionTestDetail" :is-show="isShow" @changeShow="changeShow" @updateTestList="getTestList" />
    <!-- 题干信息回显组件 -->
    <showTestBank ref="showTestBank" :test-bank-detail="testBankDetail" :checkbox-list="checkboxList" />
    <!-- 审核组件 -->
    <checkStateBank ref="checkStateBank" :check-id="checkId" @checkStateTofather="getTestList" />
  </div>
</template>
<script>
import addTestBank from './components/addTestBank.vue'
import showTestBank from './components/showTestBank.vue'
import checkStateBank from './components/checkStateBank.vue'
import {
  getTestListAPI,
  getSubjectNameAPI,
  deleteTestAPI,
  groundingTestAPI,
  showQuestionTestAPI,
  upTestMoreAPI,
  auditTestMoreAPI
} from '@/api/question'
export default {
  name: 'Question',
  components: {
    addTestBank,
    showTestBank,
    checkStateBank
  },
  data() {
    return {
      isShow: true,
      // 查询参数
      queryData: {
        page: 1,
        limit: 10,
        subject_id: '',
        directory_id: '',
        tag_id: '',
        difficulty: '',
        quest_type: '',
        is_true_question: '',
        show_state: '',
        check_state: '',
        create_name: '',
        create_time: [],
        createTime: []
      },
      total: 0,
      // 表格返回数据
      tableData: [],
      // 学科名称列表
      SubjectNameList: [],
      // 目录名称列表
      directoryNameList: [],
      // 标签名称列表
      tagNameList: [],
      // 弹框 题库详情
      testBankDetail: {},
      // 多选题列表
      checkboxList: '',
      // 审题ID
      checkId: '',
      // 修改试题详情回显
      questionTestDetail: {},
      // 模式切换控件
      isChangeState: true,
      // 批量上架 下架操作按钮id
      multipleSelection: [],
      // 批量通过
      auditTestList: []
    }
  },
  created() {
    this.getTestList()
    this.getSubjectName()
  },
  methods: {
    // 17.批量通过
    auditTestMore() {
      this.$confirm(`确定通过这${this.multipleSelection.length}条数据吗？`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await auditTestMoreAPI({ checklist: [this.auditTestList] })
          this.$message.success('操作成功')
          this.getTestList()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 16，批量下架
    downTestMore() {
      this.$confirm(`确定下架这${this.multipleSelection.length}条数据吗？`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await upTestMoreAPI({
            id: this.multipleSelection,
            show_state: 2
          })
          this.$message.success('操作成功')
          this.getTestList()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 15，批量上架
    upTestMore() {
      this.$confirm(`确定上架这${this.multipleSelection.length}条数据吗？`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await upTestMoreAPI({
            id: this.multipleSelection,
            show_state: 1
          })
          this.$message.success('操作成功')
          this.getTestList()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 14，批量操作按钮
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {
        return item.id
      })
      this.auditTestList = val.map((item) => {
        return {
          id: item.id,
          check_remarks: '通过，暂无问题',
          check_state: 2
        }
      })
      // console.log(this.multipleSelection)
      console.log(this.auditTestList)
    },
    // 13，修改回显
    async showAddTest(id) {
      this.isShow = false
      const res = await showQuestionTestAPI(id)
      // console.log(res)
      this.questionTestDetail = res
    },
    // 12,下架
    async downTest(id) {
      this.queryData.show_state = 2
      await groundingTestAPI({
        id: [id],
        show_state: this.queryData.show_state
      })
      this.$message.success('更新成功')
      this.getTestList()
    },
    // 11，上架
    async upTest(id) {
      this.queryData.show_state = 1
      await groundingTestAPI({
        id: [id],
        show_state: this.queryData.show_state
      })
      this.$message.success('更新成功')
      this.getTestList()
    },
    // 10,删除试题
    deleteTest(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteTestAPI(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getTestList()
      }).catch((err) => {
        console.log(err)
      })
    },
    // 9,试题审核
    auditTest(id) {
      // console.log(id)
      this.checkId = id
      this.$refs.checkStateBank.showCheckDialog = true
    },
    // 8,打开弹框
    openTestBank(row) {
      this.testBankDetail = row
      this.$refs.showTestBank.showDialog = true
      // console.log(row.quest_options)
      if (row.quest_options === [] || row.quest_options === '[]') {
        return
      } else {
        this.checkboxList = JSON.parse(row.quest_options)
      }
      // console.log(this.checkboxList)
    },
    // 7,重置按钮
    resetTest() {
      this.queryData = {
        page: 1,
        limit: 10,
        subject_id: '',
        directory_id: '',
        tag_id: '',
        difficulty: '',
        quest_type: '',
        is_true_question: '',
        show_state: '',
        check_state: '',
        create_name: '',
        create_time: ''
      }
      this.getTestList()
    },
    // 6,处理日期选择器转为时间戳
    tiemToString() {
      this.queryData.create_time = this.queryData.createTime.join(',')
    },
    // 5，格式化时间
    dataFormat(time) {
      // 创建时间对象
      const date = new Date(time)
      // 获取年月日
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      return [year, month, day].map(item => item > 10 ? item : '0' + item).join('-')
    },
    // 4,change目录 获取id  获取标签名称列表
    changeDirectory(event) {
      this.queryData.tag_id = ''
      // console.log(event)
      const res = this.directoryNameList.find(item => item.id === event)
      // console.log(res)
      this.tagNameList = res.children
    },
    // 3，change学科 获取id 目录名称列表
    changeSubject(event) {
      this.queryData.tag_id = ''
      this.queryData.directory_id = ''
      // console.log(event)
      const res = this.SubjectNameList.find(item => item.id === event)
      // console.log(res)
      this.directoryNameList = res.children
    },
    // 2, 获取学科名称
    async getSubjectName() {
      const res = await getSubjectNameAPI()
      // console.log(res)
      this.SubjectNameList = res
    },
    // 1, 获取考试题列表 表头搜索
    async getTestList() {
      // 数据解构
      const { page, limit, subject_id, directory_id, tag_id, difficulty, quest_type, is_true_question, show_state, check_state, create_name, create_time } = this.queryData
      const res = await getTestListAPI({ page, limit, subject_id, directory_id, tag_id, difficulty, quest_type, is_true_question, show_state, check_state, create_name, create_time })
      // console.log(res)
      this.total = res.total
      this.tableData = res.list
    },
    // 新增试题弹框
    addTestBtn() {
      this.isShow = false
    },
    changeShow() {
      this.isShow = true
    },
    // 页码数
    sizeChange(val) {
      // console.log(val)
      this.queryData.limit = val
      this.getTestList()
    },
    // 页码
    currentChange(val) {
      // console.log(val)
      this.queryData.page = val
      this.getTestList()
    }
  }
}
</script>
<style scoped lang="scss">
 .addTestBtn{
  float: right;
 }
 .el-form-item{
  margin-bottom: 5px;
 }
 .el-pagination{
  float: right;
  margin-right:10px;
 }
</style>

